{% import '@SyliusAdmin/shared/helper/loader.html.twig' as loader %}

{% set statistics_data = hookable_metadata.context.statistics_data %}
{% set period = hookable_metadata.context.period %}

<div class="card mb-3">
    {{ loader.render() }}
    <div class="card-body">
        <div class="d-flex justify-content-end gap-5 mb-3">
            <div class="btn-group" role="group">
                <button
                    type="button"
                    class="btn {% if period == '2 weeks' %}btn-light border{% endif %}"
                    data-action="live#action"
                    data-live-action-param="prevent|changeRange"
                    data-live-period-param="2 weeks"
                    data-live-interval-param="day"
                >
                    {{ 'sylius.ui.statistics.2weeks'|trans }}
                </button>
                <button
                    type="button"
                    class="btn {% if period == 'month' %}btn-light border{% endif %}"
                    data-action="live#action"
                    data-live-action-param="prevent|changeRange"
                    data-live-period-param="month"
                    data-live-interval-param="day"
                >
                    {{ 'sylius.ui.statistics.month'|trans }}
                </button>
                <button
                    type="button"
                    class="btn {% if period == 'year' %}btn-light border{% endif %}"
                    data-action="live#action"
                    data-live-action-param="prevent|changeRange"
                    data-live-period-param="year"
                    data-live-interval-param="month"
                    {{ sylius_test_html_attribute('year-split-into-months') }}
                >
                    {{ 'sylius.ui.statistics.year'|trans }}
                </button>
            </div>
            <div class="btn-group" role="group">
                <button
                    type="button"
                    class="btn btn-icon navigation navigation-prev"
                    data-action="live#action"
                    data-live-action-param="prevent|getPreviousPeriod"
                    {{ sylius_test_html_attribute('previous-period') }}
                >
                    {{ ux_icon('tabler:arrow-left', {'class': 'icon dropdown-item-icon'}) }}
                </button>
                <button
                    type="button"
                    class="btn btn-icon navigation navigation-prev"
                    data-action="live#action"
                    data-live-action-param="prevent|getNextPeriod"
                    {{ sylius_test_html_attribute('next-period') }}
                >
                    {{ ux_icon('tabler:arrow-right', {'class': 'icon dropdown-item-icon'}) }}
                </button>
            </div>
        </div>

        <div
            id="statistics-chart"
            class="chart-lg"
            data-intervals="{{ statistics_data.sales_summary.intervals|json_encode }}"
            data-sales="{{ statistics_data.sales_summary.sales|json_encode }}"
            data-paid-orders-count="{{ statistics_data.sales_summary.paid_orders_count|json_encode }}"
            data-currency="{{ statistics_data.currency_symbol }}"
        ></div>
    </div>
</div>
